import ProTable from '@ant-design/pro-table';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useEffect, memo } from 'react';
import { useRequest } from '@umijs/hooks';

import styles from './AuditForms.less';
import PayCountModal from './PayCountModal'
// queryPassengerList
import {getCompensationCount} from '../../service'

const PassengerList = props => {
  // var tableList = props.checkedPaxList ? props.checkedPaxList.data : [];
  // const [current, handleCurrent] = useState(1);
  // const [pageSize, handlePageSize] = useState(10);
  const [total, handleTotal] = useState(0);
  const [tableData, handleTableData] = useState([]);

  // 过滤证件类型'NI' 身份证, 'PP','PSPT' 都是护照
  const flilterIDtype = (v) => {
    if (v === 'NI') {
      return (
        <span>身份证</span>
      )
    } else if (v === 'PP' || v === 'PSPT') {
      return (
        <span>护照</span>
      )
    }else{
      return (
        <span>其他</span>
      )
    }
      
  }

  const filterReceiveStatus = (v) => {
    if (v === '1') {
      return (
        <span>已领取</span>
      )
    } else if (v=== '0') {
      return (
        <span>未领取</span>
      )
    }  else if (v === '2') {
      return (
        <span>领取中</span>
      )
    }
  }

  const filterFrozenStatus = (v) => {
    if (v === '0') {
      return (
        <span>未冻结</span>
      )
    } else {
      return (
        <span>已冻结</span>
      )
    }
  }
  const filterPayStatus = (v) => {
    if (v === '0') {
      return  (
        <span>未支付</span>
      )
    } else if (v === '1') {
      return (
        <span>支付成功</span>
      )
    } else if (v=== '2') {
      return (
        <span>支付失败</span>
      )
    } else {
      return (
        <span>未支付</span>
      )
    }
  }
  const [passengerName, handlePassengerName] = useState('')
  const [payCountVisible, handlePayCountVisible] = useState(false) // 总补偿人数弹框
  const [data, handleData] = useState([])
	const openCountModal = (payCount, record) => {
		if (payCount === '0') {
			return false;
    }
    handlePassengerName(record.psgName)
		handlePayCountVisible(true);
    getCompensationCount({
      flightNo: record.flightNum,
			flightDate: record.flightDate,
			paxId: record.idx
    }).then(res=>{
      handleData(res)
    })
  };
  
  // const { run: searchPassenger} = useRequest(() => queryPassengerList(
  //   { orderId: orderId,
  //     pageSize:pageSize,
  //     current:current
  //   }
  //   ), {
  //   manual: true,
  //   onSuccess: (searchPassengerData) => {
  //     handleTableData(searchPassengerData.data);
  //     handleTotal(searchPassengerData.total);
  //     handleCurrent(searchPassengerData.current);
  //     handlePageSize(searchPassengerData.pageSize);
  //   }
  // })
  // useEffect(()=>{
  //   searchPassenger()
  // }, [pageSize, current])
  const columns = [
    {
      title: '姓名',
      dataIndex: 'psgName',
      fixed: 'left',
      width: 150,
      render: (text, record) => {
        return (
          <div>
            <span style={{ verticalAlign: 'middle' }}>{text}</span>
            {record.withBaby === "Y" ? (<img alt="" style={{ verticalAlign: 'middle' }} src={require('../images/icon-test.svg')} />) : null}
            {record.isChild === "Y" ? (<img alt="" style={{ verticalAlign: 'middle' }} src={require('../images/ertong.svg')} />) : null}
          </div>
        )
      }
    },
    // {
    //   title: '旅客类型',
    //   dataIndex: 'passengerType',
    //   width: 130,
    //   filters: false,
    //   hideInSearch: true,
    //   valueEnum: {
    //     'ADT': '成人',
    //     'INF': '婴儿',
    //     'CHD': '儿童',
    //   },
    //   render: (text, record) => {
    //     return (
    //       <div>
    //         <span style={{ verticalAlign: 'middle' }}>{text}</span>
    //         {record.withBaby === "Y" ? (<img alt="" style={{ verticalAlign: 'middle' }} src={require('../images/icon-test.svg')} />) : null}
    //         {record.isChild === "Y" ? (<img alt="" style={{ verticalAlign: 'middle' }} src={require('../images/ertong.svg')} />) : null}
    //       </div>
    //     )
    //   }
    // },
    {
      title: '证件类型',
      dataIndex: 'idType',
      fixed: 'left',
      width: 110,
      align: 'center',
      render: text => {
        return flilterIDtype(text)
      }
    },
    {
      title: '证件号',
      dataIndex: 'idNum',
      fixed: 'left',
      ellipsis: true,
      width: 180,
      align: 'center'
    },
    {
      title: '航段',
      dataIndex: 'segment',
      fixed: 'left',
      width: 160,
      align: 'center'
    },
    {
      title: '票号',
      dataIndex: 'etNum',
      width: 140,
      align: 'center'
    },
    {
      title: '主舱位',
      dataIndex: 'mainClass',
      width: 90,
      align: 'center'
    },
    {
      title: '子舱位',
      dataIndex: 'subClass',
      width: 90,
      align: 'center'
    },
    {
      title: 'PNR',
      dataIndex: 'pnrRef',
      width: 120,
      align: 'center'
    },
    {
      title: '值机状态',
      dataIndex: 'status',
      align: 'center',
      filters: false,
      width: 150,
      render: (status) => (
        <>
          <span style={{ display: status === 'PT' ? 'block' : 'none' }}>PT（出票）</span>
          <span style={{ display: status === 'NA' ? 'block' : 'none' }}>NA（未值机）</span>
          <span style={{ display: status === 'AC' ? 'block' : 'none' }}>AC（值机）</span>
          <span style={{ display: status === 'XR' ? 'block' : 'none' }}>XR（值机取消）</span>
          <span style={{ display: status === 'CL' ? 'block' : 'none' }}>CL（订座取消）</span>
          <span style={{ display: status === 'SB' ? 'block' : 'none' }}>SB（候补）</span>
          <span style={{ display: status === 'DL' ? 'block' : 'none' }}>DL（拉下）</span>
        </>
      )
    },
    {
      title: '购票时间',
      dataIndex: 'printTicketTime',
      align: 'center',
      width: 180
    },
    {
      title: '旅客手机号',
      ellipsis: true,
      key: 'phone',
      filters: false,
      hideInSearch: true,
      dataIndex: 'phone',
      width: 120,
    },
    {
      title: '总补偿次数',
      dataIndex: 'payCount',
      width: 160,
      align: 'center',
      render: (payCount, record) => (
        <span style={{textDecoration: 'underline'}} onClick={() => {
            openCountModal(payCount, record)
        }} className={payCount !== '0' ? styles.count: ''}>{payCount == '-' ? 0 : payCount}</span>
      )
    },
    {
      title: '总补偿金额',
      dataIndex: 'payMoney',
      width: 130,
      align: 'center'
    },
    {
      title: '支付状态',
      dataIndex: 'payStatus',
      align: 'center',
      width: 120,
      render: text => {
        // return filterPayStatus(text)
        return text
      }
    },
    {
      title: '支付失败原因',
      dataIndex: 'payFailRemark',
      align: 'center',
      ellipsis: true,
      width: 180
    }
  ];

  return (
    <div className='formItems'>
      <ProTable
        size='mini'
        columns={columns}
        options={false}
        toolBarRender={false}
        search={false}
        rowKey='idx'
        dataSource={props.checkedPaxList}
        scroll={{ y: 400, x: 900 }}
        pagination={false}
       />
        {/* <Pagination
					total={total}
					showSizeChanger
					showQuickJumper
					showTotal={(total, range) => `${range[0]}-${range[1]} 共 ${total} 项`} pageSize={pageSize} current={current} 
					onChange={page => {
						handleCurrent(page)
					}}
					onShowSizeChange={(current, size) => {
						handlePageSize(size)
					}} /> */}
      <PayCountModal data={data} passengerName={passengerName} payCountVisible={payCountVisible} handlePayCountVisible={handlePayCountVisible}></PayCountModal>
    </div>
  )
}

/**
 * 优化渲染
 * 比较数组要.sort()之后再比较
 */
function carefulRender(prevProps, nextProps) {
  if (prevProps.checkedPaxList.length == nextProps.checkedPaxList.length) {
    return true
  }else{
    if (JSON.stringify(prevProps.checkedPaxList.sort()) != JSON.stringify(nextProps.checkedPaxList.sort())) {
      return false
    }else{
      return true
    }
  }
}
export default memo(PassengerList,carefulRender)